<template>
  <div></div>
</template>

<script>
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import dat from "three/examples/jsm/libs/dat.gui.module";
import Stats from "three/examples/jsm/libs/stats.module";
import { MeshBasicMaterial, PlaneBufferGeometry, TextureLoader } from "three";


let renderer = "";
let camera = "";
let scene = "";
let light = "";
let gui = "";
let helper = "";
let stats = "";
let controls = "";
let raycaster = "";
let mouse = "";

export default {
  data() {
    return {};
  },
  methods: {
    initRender() {
      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      // 根据加入场景先后渲染，避免sprite被遮挡
      this.renderer.sortObjects = false;
      // 开启阴影渲染
      this.renderer.shadowMap.enabled = true;
      this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
      // 设置背景色
      this.renderer.setClearColor(100, 255, 0, 0);
      document.body.appendChild(this.renderer.domElement);
    },
    initCamera: function () {
      this.camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        0.1,
        100000
      );
      this.camera.position.set(300, 500, 500);
      this.camera.lookAt(new THREE.Vector3(0, 0, 0));
    },
    initLight: function () {
      // 环境光  白光
      this.scene.add(new THREE.AmbientLight(0x404040, 2));

      this.light = new THREE.PointLight(0xffffff);
      this.light.position.set(200, 600, 600);

      // 点光源开启阴影投射
      this.light.castShadow = true;

      this.scene.add(this.light);
    },

    initModel: function () {
      let self = this;
      let loader = new GLTFLoader();
      loader.load("/static/NewProject.gltf", function (gltf) {
        
        gltf.scene.position.set(0, 0, 0);
        gltf.scene.scale.set(100,100,100)
        self.scene.add(gltf.scene);
      });
    },
    initHelper: function () {
      //辅助工具
      // 三维坐标系
      this.helper = new THREE.AxesHelper(50);
      this.scene.add(this.helper);
    },

    initControls: function () {
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);

      // 旋转是否有惯性
      this.controls.enableDamping = false;

      // 是否可以缩放
      this.controls.enableZoom = true;
      // 是否自动旋转
      this.controls.autoRotate = false;

      // 设置相机距离原点最小
      this.controls.minDistance = 1;
      // 设置相机距离原点最远距离
      this.controls.maxDistance = 900;
      // 是否开启右键拖拽
      this.controls.enablePan = true;
      // 设置上下方向最大旋转弧度
      this.controls.maxPolarAngle = Math.PI / 2 - 0.01 * Math.PI;
    },

    initScene: function () {
      this.scene = new THREE.Scene();
    },

    render: function () {
      this.renderer.render(this.scene, this.camera);
    },

    onWindowResize: function () {
      this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();
      this.render();
      this.renderer.setSize(window.innerWidth, window.innerHeight);
    },

    animate: function() {
        this.render();

        requestAnimationFrame(this.animate);
    },

    draw: function() {
        this.initRender();
        this.initScene();
        this.initCamera();
        this.initLight();
        this.initModel();
        this.initControls();
        this.initHelper()
        this.animate();
        window.onresize = this.onWindowResize;
    }
  },
  mounted() {
      this.draw();
  },
};
</script>

<style>
</style>